import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
import { TabsState } from "storybook/internal/components";

import { Figma } from "@storybook/addon-designs/blocks";

import * as AdvancedStories from "./index.stories";

<Meta of={AdvancedStories} />

# Advanced usage

{/* prettier-ignore */}
<Subtitle>

A list of advanced usages.

</Subtitle>

- [Change tab title](#change-tab-title)
- [Embed multiple designs](#embed-multiple-designs)
- [Render as tab instead of addon panel](#render-as-tab-instead-of-addon-panel)
- [Doc Blocks](#doc-blocks)

## Change tab title

You can change the addon tab title (defaulted to `Design`) by setting `name` property of the `design` parameter.

[Example](/story/docs-advanced-usage--set-tab-name)

```js
export const myStory = {
  parameters: {
    design: {
      name: "Wireframe",
      type: "figma",
      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
    },
  },
};
```

## Embed multiple designs

You can embed more than one designs by passing an array to the `design` parameter.

[Example](/story/docs-advanced-usage--embed-multiple-designs)

```js
export const myStory = {
  parameters: {
    design: [
      {
        type: "figma",
        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
      },
      {
        type: "link",
        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
      },
    ],
  },
};
```

To change the name of tabs, pass `name` option to each object.

[Example](/story/docs-advanced-usage--set-tab-names)

```js
export const myStory = {
  parameters: {
    design: [
      {
        name: "Foo",
        type: "figma",
        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
      },
      {
        name: "Bar",
        type: "link",
        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
      },
    ],
  },
};
```

Here is a list of tab-related parameter options.

| Option name | Type      | Default value     | Description                                                                       |
| ----------- | --------- | ----------------- | --------------------------------------------------------------------------------- |
| `name`      | `string`  | A value of `type` | A name of the tab.                                                                |
| `offscreen` | `boolean` | `true`            | Whether to render the tab even when it's inactive. Doesn't effect for some types. |

## Render as tab instead of addon panel

The addon can render contents to `Design` tab instead of in an addon panel.
To do this, you need to set `"tab"` to a `renderTarget` preset option.
The default value is `"panel"`.

{location.pathname.startsWith('/tab/')
? <a href="../?path=/docs/docs-advanced-usage--docs" onClick={undefined}>Go back to panel mode</a>
: <a href="./tab/?path=/docs/docs-advanced-usage--docs" onClick={undefined}>Go to tab mode</a>
}

```ts
// .storybook/main.ts
import type { StorybookConfig } from "@storybook/your-framework";

const config: StorybookConfig = {
  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    { name: "@storybook/addon-designs", options: { renderTarget: "tab" } },
  ],
  framework: {
    name: "@storybook/your-framework",
    options: {},
  },
  docs: {
    autodocs: true,
  },
};

export default config;
```

## Doc Blocks

The addon provides React components for addon-docs, so you can embed design specs to your Docs:

```mdx
import { Figma } from "@storybook/addon-designs/blocks";

<Figma
  height="30%"
  collapsable
  url="https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample"
/>
```

<Figma
  height="30%"
  collapsable
  url="https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample"
/>

The `"@storybook/addon-designs/blocks"` module exports `Figma`, `IFrame`, `Image` and `Figspec` blocks, which are corresponds to each design types.

In addition to these, the module also exports `Design` special block.
It takes just a story ID and embeds designs.
It's useful when you're using customized Docs Page.

For more details, please refer to [Internal/Blocks/Common](/docs/internal-blocks-common--docs).
